<!--物流详情页面-->
<template>
  <div>
    <van-nav-bar title="物流详情" left-arrow @click-left="onClickLeft" :border="false">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" />
    </van-nav-bar>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="one">
      <span style="font-size: 13px;font-weight: bold;">{{detailInfo.userName}}</span>
      <span
        style="margin-left: 20px;font-size: 13px;font-weight: bold;"
      >{{formatTel(detailInfo.phonenumber)}}</span>
      <div>
        <span style="font-size: 13px;font-weight:">{{detailInfo.address}}</span>
      </div>
    </div>

    <div class="one" v-if="num">
      <span style="font-size: 14px;font-weight: bold;">{{company}}</span>
      <div>
        <span style="font-size: 13px;font-weight:">运单号：{{num}}</span>
      </div>
    </div>

    <van-steps direction="vertical" :active="0" v-for="(item,index) in expressInfo" :key="index">
      <van-step>
        <div>{{item.context}}</div>
        <p>{{item.time}}</p>
      </van-step>
    </van-steps>
  </div>
</template>

<script>
import { getFun, getTimer } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  name: "orderDetail",
  data() {
    return {
      userId: "",
      ordersId: "",
      refundId: "",
      code:"",
      num:"",
      company:'',
      resultv2:"",
      detailInfo: {},
      expressInfo:{},
      url1: this.$api + "/marketorderservice/api/v1/market/orders", // 获取订单详情
      url2: this.$api + "/marketorderservice/api/v1/market/kuaidi100/searchInfo", // 获取物流详情
      url3: this.$api+'/marketorderservice/api/v1/market/orders/getOrdersExpressInfo',
    };
  },
  methods: {
    formatTel(str) {
      if (str) {
        let str1 = str.substring(0, 3);
        let str2 = str.substring(7, 11);
        return str1 + "****" + str2;
      } else {
        return "";
      }
    },
    //获取收货人地址
    getData() {
      let that = this;
      this.$Axios2.Get(this.url1 + "/" + this.ordersId + "/" + this.userId).then(function(res) {
          that.detailInfo = res.data.orders;
          that.refundId = res.data.orders.refundId;
        });
    },
    //获取物流详情
    getExpressdetail() {
      let that = this;
      let params = {       
        // code: "yuantong",//快递公司编码圆通快递
        // num: "YT4633742031055",//单号
        code: that.code,//快递公司编码
        num: that.num,//单号
      };
      this.$Axios.Post(this.url2, params).then(function(res) {
          that.expressInfo = res.data;
        });
    }
  },
  mixins: [publicFun], //混入
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.code = this.$router.currentRoute.query.expressSn;
    this.num = this.$router.currentRoute.query.expressCode;
    this.company = this.$router.currentRoute.query.company;
    this.getData();
    this.getExpressdetail();
  }
};
</script>

<style scoped="">
.one {
  padding: 15px;
  line-height: 25px;
  color: #333333;
  font-family: PingFang SC;
  border-bottom: 1px solid #f8f8f8;
}
</style>